<template>
  <div>
    <nav-bar title="发布活动"></nav-bar>
    <van-form @submit="onSubmit">
      <van-field
          v-model="activityName"
          name="activityName"
          label="活动名称"
          placeholder="活动"
          :rules="[{ required: true, message: '请填写活动名称' }]"
      />
      <van-field
          v-model="content"
          name="content"
          label="活动内容"
          autosize
          rows="8"
          placeholder="活动内容"
          type="textarea"
          :rules="[{ required: true, message: '请填写活动内容' }]"
      />
      <div>
        <van-cell>
          <template #title>
            <van-uploader class="activity-upload" v-model="pictureList" accept="image/*" multiple
                          :after-read="afterRead" :max-count="3"/>
          </template>
        </van-cell>
      </div>

      <van-field name="typeId" label="类型" :rules="[{ required: true, message: '请选择活动类型' }]">
        <template #input>
          <van-radio-group v-model="typeId" direction="horizontal">
            <van-radio name="1">学习</van-radio>
            <van-radio name="2">比赛</van-radio>
            <van-radio name="3">社团</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <div>
        <van-button plain :loading="isLoading" class="activity-submit-btn" type="info" native-type="submit">
          发布
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar/NavBar";
import {Toast} from 'vant';

export default {
  name: "Activity",
  components: {
    NavBar
  },
  data() {
    return {
      isLoading: false,
      activityName: '',
      content: '',
      picture1: '',
      picture2: '',
      picture3: '',
      typeId: '',
      pictureList: []
    }
  },
  methods: {
    onSubmit(e) {
      if (this.pictureList[0]) {
        e.picture1 = this.pictureList[0].file;
      }
      if (this.pictureList[1]) {
        e.picture2 = this.pictureList[1].file;
      }
      if (this.pictureList[2]) {
        e.picture3 = this.pictureList[2].file;
      }
      let dataForm = _g.toFormData(e);
      this.isLoading = true;

      return axios.post('/activity/upload', dataForm, {
        headers: {'content-type': 'application/x-www-form-urlencoded'}
      }).then(res => {
        if (res.status === 200) {
          Toast.success(res.msg);
          this.isLoading = false;
          this.$router.go(-1);
        } else {
          Toast.fail(res.msg);
        }
      }).catch(err => {
        Toast.fail('错误');
      })
    },
    afterRead(e) {
      console.log(this.pictureList);
    }
  }
}
</script>

<style scoped>
.activity-submit-btn {
  width: 100%;
  position: fixed;
  bottom: 0;
}
</style>
